<template>
  <div class="q-pa-md">
    <t-btn label="Open Dialog" color="primary" @click="dialog = true" />

    <t-dialog v-model="dialog" persistent>
      <t-card>
        <t-card-section class="row items-center">
          <t-avatar icon="signal_wifi_off" color="primary" text-color="white" />
          <span class="q-ml-sm"
            >You are currently not connected to any network.</span
          >
        </t-card-section>

        <t-card-section class="row items-center">
          <t-toggle v-model="cancelEnabled" label="Cancel button enabled" />
        </t-card-section>

        <!-- Notice v-close-popup -->
        <t-card-actions align="right">
          <t-btn
            flat
            label="Cancel"
            color="primary"
            v-close-popup="cancelEnabled"
            :disable="!cancelEnabled"
          />
          <t-btn flat label="Turn on Wifi" color="primary" v-close-popup />
        </t-card-actions>
      </t-card>
    </t-dialog>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        dialog: ref(false),
        cancelEnabled: ref(false),
      };
    },
  };
</script>
